<template>
  <div class="Home">
    <!-- 最大盒子开始 -->
    <div class="box">
        <!-- 版心的开始 -->
        <div class="container">
            <!-- 头部的开始 -->
            <div class="top_header ">
                <div class="top_header1">
                    <div class="top_header_logo">
                        <img class="auto-img" src="../assets/image/logoHome.png" alt="" >
                        <i>|</i>
                        <span>品牌特卖·100%正品</span>
                    </div>
                    <div class="top_header_right ">
                        <!-- <a href="./login.html" target="_blank"> -->
                        <router-link tag="i" to="/userInfo" class="vip-icon icon-member" v-show="showInfo"></router-link>
                        <router-link tag="a" to="/login" v-show="!showInfo"> 登录</router-link>
                        <router-link tag="a" to="/sort">
                            <img class="auto-img" src="../assets/image/1.png" alt="">
                        </router-link>
                       
                    </div>
                </div>
                <!-- 搜索框开始 -->
                <div class="top_header_seacher">
                        <form action="">
                            <router-link class="input" tag="a" to="/search">
                            <input type="text" placeholder="保鲜盒">
                            </router-link>
                        </form>
                </div>
                <!-- 搜索框的结束 -->
                <!-- 导航分列开始 -->
                <div class="top_header_nav">
                    <ul class="top_header_nav_ul">
                        <li><a href="#" class="con">推荐</a></li>
                        <router-link to="threeDiscount" tag="li"><a href="#">3折疯抢</a></router-link>
                        <router-link to="/lightProduct" tag="li"><a href="#">超优快抢</a></router-link>
                        <li><a href="#">国际</a></li>
                    </ul>
                </div>
                <!-- 导航分列结束 -->
            </div>
            <!-- 头部的结束 -->
            <!-- 轮播图的背景开始 -->
            <div class="nav_bg">
                <img src="../assets/image/大图.jpg" class="auto-img" alt="">
                <div class="imgages">
                    <img src="../assets/image/img.png" class="auto-img">    
                    <img src="../assets/image/img2.png" class="auto-img">   
                    <img src="../assets/image/img3.png" class="auto-img">   
                    
                </div>
                <div class="img4"><img src="../assets/image/baibian.png" class="auto-img"></div>
            </div>
            <!-- 轮播图的背景结束 -->
            <!-- 内容1开始 -->
            <div class="content1">
                <div id="bigImg1"><img class="auto-img" src="../assets/image/ia_01 (8).png"  alt=""></div>
                <div id="bigImg2"><img class="auto-img" src="../assets/image/ia_01 (5).png"  alt=""></div>
                <router-link tag="div" to="/threeDiscount" id="shopimg1"><img class="auto-img" src="../assets/image/2.png" alt=""></router-link>
                <router-link tag="div" to="/threeDiscount" id="shopimg2"><img class="auto-img" src="../assets/image/2.png"  alt=""></router-link>
                <router-link tag="div" to="/lightProduct" id="shopimg3"><img class="auto-img" src="../assets/image/2.png"  alt=""></router-link>
                <router-link tag="div" to="lightProduct" id="shopimg4"><img class="auto-img" src="../assets/image/2.png" alt=""></router-link>
                <div id="icon1"><img class="auto-img" src="../assets/image/ia_01 (14).png"  alt=""></div>
                <div id="icon2"><img class="auto-img" src="../assets/image/ia_01 (14).png"  alt=""></div>
                <div id="icon3"><img class="auto-img" src="../assets/image/ia_01 (14).png"  alt=""></div>
                <div id="icon4"><img class="auto-img" src="../assets/image/ia_01 (14).png"  alt=""></div>
                <div id="titleImg1"><img class="auto-img" src="../assets/image/3.png"  alt=""></div>
                <div id="titleImg2"><img class="auto-img" src="../assets/image/3.png"  alt=""></div>
                <div id="titleImg3"><img class="auto-img" src="../assets/image/3.png"  alt=""></div>
                <div id="titleImg4"><img class="auto-img" src="../assets/image/3.png"  alt=""></div>
                <div><span id="titlecon1">3折封顶</span></div>
                <span id="titlecon2">3折封顶</span>
                <span id="titlecon3">3折封顶</span>
                <span id="titlecon4">3折封顶</span>
            </div>
            <!-- 内容1结束 -->

            <!-- 内容2开始 -->
            <router-link to="/threeDiscount" tag="div" class="content2">
                <div id="imgBig1"><img class="auto-img" src="../assets/image/ia_01 (17).png"  alt=""></div>
                <div id="imgBig2"><img class="auto-img"  src="../assets/image/ia_01 (9).png"  alt=""></div>
                <div id="advertise1"><img class="auto-img"  src="../assets/image/ia_01 (15).png"  alt=""></div>
                <div id="advertise2"><img class="auto-img"  src="../assets/image/ia_01 (15).png"  alt=""></div>
                <div id="product1"><img class="auto-img"  src="../assets/image/ia_01 (5).jpg"  alt=""></div>
                <div id="product2"><img class="auto-img"  src="../assets/image/ia_01 (5).jpg"  alt=""></div>
                <div id="bg1"><img class="auto-img"  src="../assets/image/4.png"  alt=""></div>
                <div id="bg2"><img class="auto-img"  src="../assets/image/4.png"  alt=""></div>
                <span class="bgWord1">￥139</span>
                <span class="bgWord2">￥139</span>
            </router-link>
            <!-- 内容2结束 -->
            <!-- 内容3开始 -->
            <router-link to="/productDetail" tag="div" class="content3">
               <div class="big_content">
                <div class="ltart-sectionlist-item">
                    <div class="ltart-sectionlist-col-items">
                        <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2021/04/06/39/ias_913df417a22c65b82cee06ae6ec06256_164x164_90.png" alt="">
                        <span>限量爆款</span>
                        <p>￥113</p>
                    </div>
                    <div class="ltart-sectionlist-col-items">
                        <img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcpos/1100013549/2022/0925/108/9689980b-df52-459a-9e91-c2879373a1a1_164x164_90.jpg" alt="">
                        <span>领￥20券</span>
                        <p>￥309</p>
                    </div>
                    <div class="ltart-sectionlist-col-items">
                        <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2021/09/20/33/ias_c174628863c5a89b439e56b6b5f0bb1e_164x164_90.png" alt="">
                        <span>人气热卖</span>
                        <p>￥32</p>
                    </div>
                    <div class="ltart-sectionlist-col-items">
                        <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2021/04/20/178/ias_80d10d025894a539c104b39332e01fa4_164x164_90.png" alt="">
                        <span>限量爆款</span>
                        <p>￥139</p>
                    </div>
                </div>
               </div>
            </router-link>
            <!-- 内容3结束 -->

            <!-- 活动1开始 -->
            <div class="hotitem1">
                <img src="../assets/image/7.png" alt="">
            </div>
            <!-- 活动1结束 -->
            <!-- 活动2开始 -->
            <router-link to="/brand" class="hotitem2">
                <img src="../assets/image/8.jpg" alt="">
                <h4>秋水伊人女装专场</h4>
                <p><span>5</span>折封顶</p>
            </router-link>
            <!-- 活动2结束 -->
            <!-- 购物车图标开始 -->
            <div class="shoppingicon">
                <router-link to="/shopCar">
                    <span data-v-3f94e833="" class="icon-cart i-flow-carticon"></span>
                </router-link>
            </div>
            <!-- 购物车图标结束 -->
            <!-- 回到顶部图标 -->
            <div class="topbackicon" v-show="this.backIconsLength > 350" @click="scrollTop" >
                <a href="#">
                    <i data-v-9e47b6c0="" class="icon-up"></i>
                </a>
            </div>
        </div>
        <!-- 版心的结束 -->
    </div>
    <!-- 最大盒子结束 -->
  </div>
</template>

<script>
  export default {
    name:"HomeView",
    data() {
        return {
            showInfo: false,  //显示是否登录
            backIconsLength:0,  //距离顶部屏幕滚动距离
        };
    },
    methods:{
      // 滚动距离 显示按钮
         scrollFun(){
             window.onscroll = ()=>{
               this.backIconsLength = window.pageYOffset
             //   console.log(this.backIconsLength);
             //   console.log(this);
            }
         },
         // 滚动到顶部
         scrollTop(){
             window.scrollTo(0,0)
         },
    },

    created(){
        console.log(this.showInfo);
        // 判断是否登录
        if(window.localStorage.getItem("token")){
            this.showInfo = true
        }else{
            this.showInfo = false
        }
    },
    mounted(){
        // 页面数据挂载完成
        this.scrollFun();
    }
  }
</script>

<style scoped>
.container{ 
            position: relative;
            width: 100%;
        }
       .container .top_header{ 
        position: sticky;
        top: 0;
        left: 0;
        background-color:#f9f9fa ;
        z-index: 99;
        
       }
       .container .top_header .top_header1{
        display: flex;
        justify-content: space-between;
       }
       .container .top_header .top_header1 .top_header_logo{
        display: flex;
        align-items: center;
       }
        .container .top_header .top_header1 .top_header_logo img{
            width: 75px;
            height: 19px;
            display: inline-block;
            vertical-align: middle;
            margin-left: 10px;
        }
        .container .top_header .top_header1 .top_header_logo span{
            font-size: 12px;
            line-height: 43px;
            color: #98989f;
            
        }
        .container .top_header .top_header1 .top_header_logo i{
            margin: 0 7px;
            vertical-align: middle;
            font-size: 17px;
            line-height: 43px;
            color: #eaebef;
        }
        .container .top_header .top_header1 .top_header_right{
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .container .top_header .top_header1 .top_header_right i{
            margin: 0 10px;
            font-size: 18px;
        }
        .container .top_header .top_header1 .top_header_right a{
            /* display: block; */
            margin: 0 10px;
            font-size: 14px;
        }
        
        .container .top_header .top_header1 .top_header_right a img{ 
            width: 24px;
            height: 24px;

        }
        .container .top_header  .top_header_seacher{
            height:35px;
            margin-top: 3px;
            padding: 0 10px;
            box-sizing: border-box;
        }
        .container .top_header  .top_header_seacher .input{
            width: 100%;
            height: 30px;
            display: flex;
            background-color: #f3f4f5;
            border: 1px solid #ccc;
            border-radius: 25px;
            overflow: hidden;
        }
        .container .top_header  .top_header_seacher .input input{
            flex: 1;        
            padding: 6px 10px;    
            border-radius: 5px;
            background-color: #f3f4f5;
            overflow: hidden;
            border: none;
            outline: none;
        }
        .container .top_header  .top_header_nav{
            border-bottom: 0.5px solid #e5e5e5;
            padding: 0 18px;
           
        }
        .container .top_header  .top_header_nav ul{
            display: flex;
            justify-content: space-evenly;
        }
        .container .top_header  .top_header_nav ul li{
            height: 34px;
            padding: 0 18px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;

        }
        .container .top_header  .top_header_nav ul li a{ 
           
            font-size: 14px;
            display: block;
            height: 34px;
            line-height: 34px;
            border-bottom: 3px solid transparent;
            color: #6c6b69;
            box-sizing: border-box;
        }
        .container .top_header  .top_header_nav ul li a.con{
            border-bottom: 3px solid #c552a4;
            color: #c552a4;
        }
        .container .nav_bg{
            margin-top: 1px ;
            position: relative;
        }
        .container .nav_bg>img{ 
            width: 100%;
        }
       
       .container .nav_bg>.imgages{ 
            width: 100%;
            position: absolute;
            top: 82px;
            left: 0;
            display: flex;
            box-sizing: border-box;
            justify-content: space-evenly;
            
        }
 
        .container .nav_bg>.imgages>img{
            border-radius: 12px;
            overflow: hidden;
            /* width: 114.5px; */
            width: 30.5%;
        }
        .container .nav_bg>.imgages>img:last-child{
            display: block;
            
        }
        .container .nav_bg>.img4{
            position: absolute;
            width: 100%;
            height: 10px;
            bottom: -2px;
            left: 0;

        }
        
        /* 内容1 */
    .container .content1{
     width: 100%;
     height: 117px;
     background-color: #f3f4f5;
     /* padding: 0 8px; */
     box-sizing: border-box;
     position: relative;
}
.container .content1 #bigImg1{
    /* width: 187.5px; */
    width: 50%;
    position: absolute;
    top: 0;
    left: 0;
}
.container .content1 #bigImg2{
    /* width:187.5px; */
    width: 50%;
    position: absolute;
    top: 0;
    left:187px ;
}
.container .content1 #shopimg1{
    width: 76px;
    position: absolute;
    top: 30px;
    left: 17px;
}
.container .content1 #shopimg2{
    width: 76px;
    position: absolute;
    top: 30px;
    left: 99px;
}
.container .content1 #shopimg3{
    width: 76px;
    position: absolute;
    top: 30px;
    left: 200px;
}
.container .content1 #shopimg4{
    width: 76px;
    position: absolute;
    top: 30px;
    left: 283px;
}
.container .content1 #icon1{
    width: 40px;
    position: absolute;
    top: 86px;
    left: 35px;
}
.container .content1 #icon2{
    width: 40px;
    position: absolute;
    top: 86px;
    left: 117px;
}
.container .content1 #icon3{
    width: 40px;
    position: absolute;
    top: 86px;
    left: 218px;
}
.container .content1 #icon4{
    width: 40px;
    position: absolute;
    top: 86px;
    left: 301px;
}
.container .content1 #titleImg1{
    width: 33px;
    position:absolute;
    top: 30px;
    left: 17px;
}
.container .content1 #titleImg2{
    width: 33px;
    position:absolute;
    top: 30px;
    left: 99px;
}
.container .content1 #titleImg3{
    width: 33px;
    position:absolute;
    top: 30px;
    left: 200px;
}
.container .content1 #titleImg4{
    width: 33px;
    position:absolute;
    top: 30px;
    left: 283px;
}
.container .content1 span{
    display: block;
    position:absolute;
    top: 30px;
    left: 0px;
    z-index: 5;
    font-size: 12px;
    color: rgb(255, 31, 58);
    transform: scale(0.67);
}
.container .content1 #titlecon1{
    left: 13px;
}   
.container .content1 #titlecon2{
    left: 94px;
} 
.container .content1 #titlecon3{
    left: 195px;
} 
.container .content1 #titlecon4{
    left: 278px;
} 
/* 内容2 */
 .container .content2{
     width: 100%;
     height: 93px;
     background-color: #f3f4f5;
     /* padding: 0 8px; */
     /* box-sizing: border-box; */
     position: relative;
}
.container .content2 #imgBig1{
    /* width: 187.5px; */
    width: 50%;
    position: absolute;
    top: 0;
    left: 0 ;
}
.container .content2 #imgBig2{
    /* width: 187.5px; */
    width: 50%;
    position: absolute;
    top: 0;
    left: 187px ;
}
.container .content2 #advertise1{
    width: 83px;
    position: absolute;
    top: 26px;
    left: 16px;
}
.container .content2 #advertise2{
    width: 83px;
    position: absolute;
    top: 26px;
    left: 203px;
}
.container .content2 #product1{
    width: 68px;
    position: absolute;
    top: 13px;
    left: 108px;
    border-radius: 5px;
    overflow: hidden;
}
.container .content2 #product2{
    width: 68px;
    position: absolute;
    top: 13px;
    left: 290px;
    border-radius: 5px;
    overflow: hidden;
}
.container .content2 #bg1{
    width: 45px;
    position: absolute;
    top: 67px;
    left: 119.5px;
   
}

.container .content2 #bg2{
    width: 45px;
    position: absolute;
    top: 67px;
    left: 300.5px;
    
}
.container .content2 .bgWord1{
    display: block;
    position: absolute;
    font-size: 12px;
    text-align: center;
    top:69px;
    left:142px ;
    transform: translateX(-50%);
}
.container .content2 .bgWord2{
    display: block;
    position: absolute;
    font-size: 12px;
    text-align: center;
    top:69px;
    left:323px ;
    transform: translateX(-50%);
}
/* 内容3 */
 .container .content3{
     width: 100%;
     height: 164px;
     background-color: #f3f4f5;
     padding: 0px 8px 0px;
     box-sizing: border-box;
}
 .container .content3 .big_content{
     position: relative;
     width: 100%;
     height: 100%;
     background: url(../assets/image/ia_01\ \(16\).png)no-repeat center center/cover;
}
.ltart-sectionlist-item{
    display: flex;
    padding: 32px 8px 0;
    justify-content: space-evenly;
}
.ltart-sectionlist-item>.ltart-sectionlist-col-items>img{
    width: 82px;

}
.ltart-sectionlist-item>.ltart-sectionlist-col-items>span{
    display: block;
    width: 82px;
    text-align: center;
    color: #f7286e;
    font-size: 12px;
    margin-top: 6px;
}
.ltart-sectionlist-item>.ltart-sectionlist-col-items>p{
    width: 82px;
    text-align: center;
    font-size: 12px;
    margin-top: 6px;
}
 
/* 活动1 */
.container .hotitem1>img{
    width: 375px;
}
/* 活动2 */
.container .hotitem2{
    width: 349px;
    height: 232.5px;
    border: 1px solid rgb(232, 233, 235);
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    background-color: #ffffff;
}
.container .hotitem2>img{
    width: 100%;
}
.container .hotitem2>h4{
    font-size: 15px;
    font-weight: bold;
    padding-top: 12px;
    padding-left: 12px;
    text-align: left;
    /* text-indent: 1em; */
}
.container .hotitem2>p{
    font-size: 12px;
    /* text-indent: 1em; */
    padding-top: 10px;
    padding-left: 12px;

}
.container .hotitem2>p>span{
    color: rgb(222, 61, 150);
}
/* 购物车图标 */
 .container .shoppingicon{
     width: 45px;
     height: 45px;
     position: fixed;
    /* top: 605px;
     */
     bottom: 22px;
     left: 15px;
     background-color: #23232b;
     border-radius: 50%;
     overflow: hidden;
     z-index: 100;
}
 .container .shoppingicon>a,.topbackicon>a{
     display: block;
     height: 100%;
     width: 100%;
     color: #fff;
     text-align: center;
     font-size: 23px;
     line-height: 45px;
}
 .container .topbackicon{
     width: 45px;
     height: 45px;
     position: fixed;
   
     bottom: 22px;
     right: 15px;
     background-color: #23232b;
     border-radius: 50%;
     overflow: hidden;
     z-index: 100;
}
 


</style>